<template>
  <j-modal
    title="分享"
    width="800px"
    :visible.sync="visible"
    okText="复制链接及提取码"
    cancelText="关闭"
    @ok="handleOk">
    <a-form-model v-bind="layout">
      <a-form-model-item label="分享文件">
        <div>{{item.fileName}}</div>
      </a-form-model-item>
      <a-form-model-item label="文件链接">
        <div>{{shareInfo.urlCode}}</div>
      </a-form-model-item>
      <a-form-model-item label="提取码">
        <div>{{shareInfo.code}}</div>
      </a-form-model-item>
    </a-form-model>
  </j-modal>
</template>

<script>
  //分享modal
  import {postAction} from "@/api/manage";

  export default {
    name: "ShareModal",
    data() {
      return {
        visible: false,
        layout: {
          labelCol: {md: 7, lg: 6},
          wrapperCol: {md: 17, lg: 18},
        },
        form: {
          validType: '1'
        },
        item: {},
        shareInfo: {}
      }
    },
    methods: {
      show(item) {
        this.item = item;
        this.visible = true;
        //获取提取码,分享链接
        postAction(`fileBank/share/add?libId=${item.id}`).then(res => {
          if (res.success) {
            res.result.urlCode = `${window.location.origin}${process.env.BASE_URL}disk/take?urlCode=${res.result.urlCode}`
            this.shareInfo = res.result;
          } else {
            this.$message.error(res.message);
          }
        })
      },
      handleOk() {
        this.copyUrl();
        this.$message.success('已复制到剪切板')
        this.visible = false;
      },
      copyUrl() {
        const input = document.createElement('input');
        document.body.appendChild(input);
        input.setAttribute('value', `链接：${this.shareInfo.urlCode}，提取码：${this.shareInfo.code}`);
        input.select();
        if (document.execCommand('copy')) {
          document.execCommand('copy');
        }
        document.body.removeChild(input);
      }
    }
  }
</script>

<style scoped>

</style>